import React, { Component } from 'react';

// 导入组件
import MyHeader from '../../components/Quanbushangping/MyHeader'
import MyMian from '../../components/Quanbushangping/MyMian'

// 导入样式
import '../../styles/suoyoushangping/Allgood.scss'
// 导入全部请求
import * as service from '../../api/index'
class Allgood extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodlist: []
        }
    }
    // 发请求 商品列表
    componentDidMount() {
        service.good_list({ id: this.props.location.state.id }).then((res) => {
            console.log(res.data.list);
            this.setState({
                goodlist: res.data.list
            })
        })
    }

    fun() {
        return (
            <div>糟糕此处没有数据</div>
        )
    }

    toDetail(id) {
        this.props.history.push({ pathname: '/detail', state: { id } });
    }
    render() {

        return (
            <div >
                {/* 搜索域 */}
                <MyHeader />
                <MyMian />
                <div className='allgood'>
                    {/* 渲染页面 */}
                    {/* 商品列表 */}
                    {
                        this.state.goodlist == undefined ? this.fun() : this.state.goodlist.map((item, index) => {
                            return (
                                <div className='good' key={index} onClick={() => { this.toDetail(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.name}</div>
                                    <div className="old_price">原价￥{item.salesPrice.value}</div>
                                    <div className="price">活动价￥{item.salesPrice.value}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Allgood;